﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="./cron.js"></script>
</head>
<body>
<div style="width: 350px; height: 288px; border: 1px rgb(202, 196, 196) solid; border-radius: 5px;margin-top: 30px;margin-left: 30px;">
    <!--tab标签-->

    <div class="d_toolbar_call">
        <ul id="terminalTab" class="nav nav-tabs">
            <li class="active">
                <a href="#second" data-toggle="tab">秒</a>
            </li>
            <li>
                <a href="#minute" data-toggle="tab">分</a>
            </li>
            <li>
                <a href="#hour" data-toggle="tab">时</a>
            </li>
            <li>
                <a href="#day" data-toggle="tab">日</a>
            </li>
            <li>
                <a href="#month" data-toggle="tab">月</a>
            </li>
            <li>
                <a href="#week" data-toggle="tab">星期</a>
            </li>
        </ul>
    </div>

    <div class="tab-content">
        <div class="tab-pane fade in active" id="second">
            <div>
                <div>
                    <input type="radio" checked="checked" name="second" onclick="everyTime(this)"> 每秒 允许的通配符 [, - * /]
                </div>
                <div>
                    <input type="radio" name="second" onclick="cycle(this)">
                    周期从 <input class="num" style="width: 60px;" value="1" onchange="cycle(this,'second')">
                    - <input class="num" style="width: 60px;" value="2" onchange="cycle(this,'second')">
                    秒
                </div>
                <div>
                    <input type="radio" name="second" onclick="startOn(this)">
                    从 <input class="num" style="width: 60px;" value="0" onchange="startOn(this,'second')">
                    秒开始,每 <input class="num" style="width: 60px;" value="1" onchange="startOn(this,'second')">
                    秒执行一次
                </div>
                <div>
                    <input type="radio" name="second" id="sencond_appoint"
                           onclick="sencond_appoint(this,'second_appoint_input')">
                    指定
                </div>
                <div id="second_checkbox_group"></div>
            </div>
        </div>

        <div class="tab-pane fade" id="minute">
            <div>
                <div>
                    <input type="radio" checked="checked" name="min" onclick="everyTime(this)"> 分钟 允许的通配符[, - * /]
                </div>
                <div>
                    <input type="radio" name="min" onclick="cycle(this)"> 周期从
                    <input class="num" style="width: 60px;" data-options="min:1,max:58" value="1"
                           onchange="cycle(this,'min')"> -
                    <input class="num" style="width: 60px;" data-options="min:2,max:59" value="2"
                           onchange="cycle(this,'min')"> 分钟
                </div>
                <div>
                    <input type="radio" name="min" onclick="startOn(this)"> 从
                    <input class="num" style="width: 60px;" data-options="min:0,max:59" value="0"  onchange="startOn(this,'min')">
                    分钟开始,每 <input class="num" style="width: 60px;" data-options="min:1,max:59" value="1" onchange="startOn(this,'min')">
                    分钟执行一次
                </div>
                <div>
                    <input type="radio" name="min" id="min_appoint" onclick="minute_appoint(this,'min_appoint_input')">
                    指定
                </div>
                <div id="min_checkbox_group"></div>
            </div>
        </div>
        <div class="tab-pane fade tab-content " id="hour">
            <div>
                <input type="radio" checked="checked" name="hour" onclick="everyTime(this)"> 小时 允许的通配符[, - * /]
            </div>
            <div>
                <input type="radio" name="hour" onclick="cycle(this)">
                周期从 <input class="num" style="width: 60px;" data-options="min:0,max:23" value="0"
                           onchange="cycle(this,'hour')">
                - <input class="num" style="width: 60px;" data-options="min:2,max:23" value="2"
                         onchange="cycle(this,'hour')"> 小时
            </div>
            <div>
                <input type="radio" name="hour" onclick="startOn(this)">
                从 <input class="num" style="width: 60px;" value="0" onchange="startOn(this,'hour')">
                小时开始,每 <input class="num" style="width: 60px;" value="1" onchange="startOn(this,'hour')">
                小时执行一次
            </div>
            <div>
                <input type="radio" name="hour" id="hour_appoint" onclick="hour_appoint(this,'hour_appoint_input')"> 指定
            </div>
            <div id="hourList"></div>
        </div>
        <div class="tab-pane fade" id="day">
            <div>
                <div>
                    <input type="radio" checked="checked" name="day" onclick="everyTime(this)"> 日 允许的通配符[, - * / L W]
                </div>
                <div>
                    <input type="radio" name="day" onclick="unAppoint(4)"> 不指定
                </div>
                <div>
                    <input type="radio" name="day" onclick="cycle(this)"> 周期从
                    <input class="num" style="width: 60px;" data-options="min:1,max:31" value="1"
                           onchange="cycle(this,'day')"> -
                    <input class="num" style="width: 60px;" data-options="min:2,max:31" value="2"
                           onchange="cycle(this,'day')"> 日
                </div>
                <div>
                    <input type="radio" name="day" onclick="startOn(this)"> 从
                    <input class="num" style="width: 60px;" data-options="min:1,max:31" value="1" onchange="startOn(this,'day')">
                    日开始,每 <input class="num" style="width: 60px;" data-options="min:1,max:31" value="1" onchange="startOn(this,'day')">
                    天执行一次
                </div>
                <div>
                    <input type="radio" name="day" onclick="workDay(this)">
                    每月
                    <input class="num" style="width: 60px;" data-options="min:1,max:31" value="1" onchange="workDay(this)"   >
                    号最近的那个工作日
                </div>
                <div>
                    <input type="radio" name="day" onclick="lastDay(this)"> 每月最后一天
                </div>
                <div>
                    <input type="radio" name="day" id="day_appoint" onclick="day_appoint(this,'day_appoint_input')"> 指定
                </div>
                <div id="dayList"></div>
            </div>
        </div>
        <div class="tab-pane fade" id="month">
            <div>
                <div>
                    <input type="radio" checked="checked" name="mouth" onclick="everyTime(this)"> 月 允许的通配符[, - * /]
                </div>
                <div>
                    <input type="radio" name="mouth" onclick="cycle(this)">
                    周期从
                    <input class="num" style="width: 60px;" value="1" onchange="cycle(this,'mouth')">
                    -
                    <input class="num" style="width: 60px;" value="2" onchange="cycle(this,'mouth')"> 月
                </div>
                <div>
                    <input type="radio" name="mouth" onclick="startOn(this)">
                    从
                    <input class="num" style="width: 60px;" data-options="min:1,max:12" value="1" onchange="startOn(this,'mouth')">
                    日开始,每
                    <input class="num" style="width: 60px;" data-options="min:1,max:12" value="1" onchange="startOn(this,'mouth')">
                    月执行一次
                </div>
                <div>
                    <input type="radio" name="mouth" id="mouth_appoint"
                           onclick="mouth_appoint(this,'mouth_appoint_input')"> 指定
                </div>
                <div id="mouthList"></div>
            </div>
        </div>
        <div class="tab-pane fade" id="week">
            <div>
                <div>
                    <input type="radio" checked="checked" name="week" onclick="everyTime(this)"> 周 允许的通配符 [, - * / L #]
                </div>
                <div>
                    <input type="radio" name="week" onclick="unAppoint(6)"> 不指定
                </div>
                <div>
                    <input type="radio" name="week" onclick="startOn(this)">
                    周期 从星期
                    <input class="num" style="width: 60px;" data-options="min:1,max:7" onchange="cycle(this,'week')"
                           value="1">
                    - <input class="num" style="width: 60px;" data-options="min:2,max:7" value="2"
                             onchange="cycle(this,'week')">
                </div>
                <div>
                    <input type="radio" name="week" onclick="weekOfDay(this)">
                    第 <input class="num" style="width: 60px;" data-options="min:1,max:4" value="1" id="weekStart_1">
                    周的星期 <input class="num" style="width: 60px;" data-options="min:1,max:7" id="weekEnd_1" value="1">
                </div>
                <div>
                    <input type="radio" name="week" onclick="lastWeek(this)">
                    本月最后一个星期
                    <input class="num" style="width: 60px;" data-options="min:1,max:7"  value="1" onchange="lastWeek(this)">
                </div>
                <div>
                    <input type="radio" name="week" id="week_appoint" onclick="week_appoint(this,'week_appoint_input')">
                    指定
                </div>
                <div id="weekList"></div>
            </div>
        </div>
    </div>
    cron表达式:
    <div id="cron_str">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>?</span>
    </div>
    下次运行时间:
    <span id="next_arr"></span>
</div>
<script>
    // var _tagName = "";
    // $(function () {
    //     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    //         // 获取已激活的标签页的名称
    //         _tagName = $(e.target).prop("href").split("#")[1];
    //         console.log('_tagName--->' + _tagName);
    //     });
    // });

    addCheck('second_checkbox_group', 0, 60, 'second_appoint_input');
    addCheck('min_checkbox_group', 0, 60, 'min_appoint_input');
    addCheck('hourList', 0, 24, 'hour_appoint_input');
    addCheck('dayList', 1, 32, 'day_appoint_input');
    addCheck('mouthList', 1, 13, 'mouth_appoint_input');
    addCheck('weekList', 1, 8, 'week_appoint_input');

    function addCheck(id, start, size, class_name) {
        $("#" + id).append("<div>");
        for (i = start; i < size; i++) {
            if (i < 10) {
                let str_i = "0" + i;
                $("#" + id).append("<input type='checkbox' class='" + class_name + "' value='" + i + "' >" + str_i);
            } else {
                $("#" + id).append("<input type='checkbox' class='" + class_name + "' value='" + i + "' >" + i);
            }

            if ((i - start) % 10 == 9) {
                $("#" + id).append("</div>");
                $("#" + id).append("<div>");
            }
        }
        $("#" + id).append("</div>");
    }

</script>
</body>
</html>